<style lang="css" scoped>
	.ivu-modal{
		height:700px;
		overflow: hidden;
	}
</style>
<template>
  <div>
	<Card>
		<p slot="title" style="height: 32px">
			新增投票活动
		</p>		
		<Form ref="myForm" :model="formItems" :label-width="90">
			<FormItem label="类型：" :label-width="100"> 
				<Select clearable style="width:100px">
					<Option :value="1">微信</Option>
					<Option :value="2">APP</Option>
				</Select>				
			</FormItem>															
	
			<FormItem label="模板选择：" :label-width="100"> 
				<Select clearable style="width:100px">
					<Option :value="1">模板1</Option>
					<Option :value="2">模板2</Option>
					<Option :value="3">模板3</Option>
					<Option :value="4">模板4</Option>
				</Select>							
			</FormItem>														
			<FormItem label="活动标题：" prop="title">
				<Input v-model="formItems.title" placeholder="请输入活动标题"></Input>
			</FormItem>	
			<FormItem label="广告图片：" prop="adimg">
    			<Input v-model="formItems.adimg" style="display:none"></Input>
				<Upload action="//jsonplaceholder.typicode.com/posts/">
	    			<Button type="ghost" icon="ios-cloud-upload-outline">上传图片</Button>
				</Upload>
			</FormItem>	
			<FormItem label="每个用户可投票数（为0不限）：" :label-width="190" prop="everyonevote">
				<Input-number v-model="everyonevote"></Input-number>
			</FormItem>	
			<FormItem label="每个用户每天可投票数（为0不限）：" prop="everyonedayvote" :label-width="220" label-position="left">
				<Input-number v-model="everyonedayvote"></Input-number>
			</FormItem>			
			<FormItem label="同一个IP下每天可投票数（为0不限）：" prop="everyipdayvote" :label-width="230">
				<Input-number v-model="everyipdayvote"></Input-number>
			</FormItem>		
			<FormItem label="报名开始时间：" :label-width="100" prop="applystarttime" >
				<DatePicker type="date" v-model="formItems.applystarttime" style="width: 200px"></DatePicker>
			</FormItem>		
			<FormItem label="报名结束时间：" :label-width="100" prop="applyendtime">
				<DatePicker type="date" v-model="formItems.applyendtime" style="width: 200px"></DatePicker>
			</FormItem>		
			<FormItem label="投票开始时间：" :label-width="100" prop="votestarttime">
				<DatePicker type="date" v-model="formItems.votestarttime" style="width: 200px"></DatePicker>
			</FormItem>		
			<FormItem label="投票结束时间：" :label-width="100" prop="voteendtime">
				<DatePicker type="date" v-model="formItems.voteendtime" style="width: 200px"></DatePicker>
			</FormItem>
			<FormItem label="投票标题1：" prop="votetitle1">
				<Input v-model="formItems.votetitle1" placeholder="投票标题1"></Input>
			</FormItem>		
			<FormItem label="活动介绍1：" prop="votecontent1">
				<Input v-model="formItems.votecontent1" type="textarea" placeholder="请输入..."></Input>
			</FormItem>	
			<FormItem label="投票标题2：" prop="votetitle2">
				<Input v-model="formItems.votetitle2" placeholder="投票标题2"></Input>
			</FormItem>		
			<FormItem label="活动介绍2：" prop="votecontent2">
				<Input v-model="formItems.votecontent2" type="textarea" placeholder="请输入..."></Input>
			</FormItem>	
			<FormItem label="投票标题3：" prop="votetitle3">
				<Input v-model="formItems.votetitle3" placeholder="投票标题3"></Input>
			</FormItem>		
			<FormItem label="活动介绍3：" prop="votecontent3">
				<Input v-model="formItems.votecontent3" type="textarea" placeholder="请输入..."></Input>
			</FormItem>	
			<FormItem label="虚拟浏览量：" prop="xn_views">
				<Input-number v-model="xn_views"></Input-number>
			</FormItem>		
			<FormItem label="虚拟投票量：" prop="xn_vote">
				<Input-number v-model="xn_vote"></Input-number>
			</FormItem>		
			<FormItem label="虚拟报名数：" prop="xn_apply">
				<Input-number v-model="xn_apply"></Input-number>
			</FormItem>	
			<FormItem label="是否需要审核：" :label-width="100"> 
				<Select clearable style="width:100px">
					<Option :value="1">是</Option>
					<Option :value="2">否</Option>
				</Select>				
			</FormItem>	
			<FormItem label="自动锁定规则：" prop="lock_min" :label-width="100">
				当<Input-number v-model="lock_min"></Input-number>分钟的投票数量超过<Input-number v-model="lock_vote"></Input-number>票时自动锁定选手。
			</FormItem>		
			<FormItem label="自动锁定规则：" prop="lock_vote" style="display:none">
			</FormItem>		
		</Form>			
			<div style="">	
				<Button type="success" style="margin-right:10px;">确定</Button>	<Button type="info" style="margin-right:10%;">返回</Button>			
			</div>
    </Card>				
  </div>
</template>
<script>
import Tables from '_c/tables'
import { getTableData } from '@/api/data'
export default {
  name: 'tables_page',
  components: {
    Tables
  },
  data () {
    return {
      columns: [
        {title: '名称', key: 'name', sortable: false, align: 'center'},
        {title: '排序', key: 'sort', sortable: false, align: 'center'},
        {
          title: '操作',
          key: 'handle',
		  align: 'center',
          button: [
            (h, params, vm) => {
				return h('Button', {
					props: {
							type: 'primary'
					},
					on: {
						click: () => {
							console.log(params);
							this.formItems = this.tableData[params.index];
							this.modelshow = true;
						}
					}
				}, '编辑')							
            },
            (h, params, vm) => {
				return h('Button', {
						props: {
								type: 'error'
						},
						style: {
							marginLeft:'10px'
						},						
						on: {
							click: () => {								
								this.tableData.splice(params.index,1);
							}
						}
				}, '删除')							
            } 
          ]
        }
      ],
      tableData: [],
			modelshow:false,
			formItems: {
				name:'',
				sex:'男',
				age:0,
				mobile:'',
				parentName:'',
				parentsex:'男',
				parentage:0,
				childName:'',
				childsex:'男',
				childage:0,
				rztime:''
			},
			clickType:'edit',
			sexArr:{man:'男',woman:'女'}
    }
  },
  methods: {
    handleDelete (params) {
      console.log(params)
    },
    exportExcel () {
      this.$refs.tables.exportCsv({
        filename: `table-${(new Date()).valueOf()}.csv`
      })
    },
		doCancel (data) {
			console.log(222333);
		},
		alertAdd () {
			this.formItems = {};
			this.modelshow = true;		
			this.clickType = 'add';
		},
		onClickOk () {
			console.log(this.formItems);
			if (this.clickType == 'add') {
				this.tableData.push(this.formItems);
			}
			console.log(this.tableData);
		}
  },
  mounted () {
		this.tableData = this.levelData
  }
}
</script>

<style>
.ivu-form .ivu-form-item-label{
	text-align:left
}
.ivu-btn-ghost{
	color: #515a6e;
}
</style>
